﻿<template>
  <div>
    <el-table
      v-loading="isLoading"
      element-loading-text="正在处理..."
      :data="menuList"
      row-key="id"
      :key="'menu_list_'+type"
      tooltip-effect="dark"
      border
      @row-click="handleClickRow"
      style="width: 100%">

      <el-table-column prop="name" show-overflow-tooltip label="名称">
        <template slot-scope="item">
          <div v-if="!item.row.icon" style="width:14px;height: 14px;display: inline-block;"></div>
          <div v-else-if="(!item.row.children||item.row.children.length==0)&&item.row.parentId=='0'" style="width:23px;height: 10px;display: inline-block;"></div>
          <span v-if="item.row.icon" :class="item.row.icon"></span>
          {{item.row.name}}
        </template>
      </el-table-column>
      <el-table-column prop="path" show-overflow-tooltip label="链接"/>
      <el-table-column prop="permission" show-overflow-tooltip label="所需权限">
        <template slot-scope="item">
          {{permissionData.dataMap[item.row.permission]?permissionData.dataMap[item.row.permission].name+'('+permissionData.dataMap[item.row.permission].id+')':item.row.permission}}
        </template>
      </el-table-column>
      <el-table-column key="sort" align="center" width="60" label="排序">

        <template slot-scope="item">
          <el-tooltip effect="dark" content="下移" placement="top">
            <el-button v-if="checkPermission('sys_menu:update')" type="text" icon="el-icon-sort-down" size="small"
                       @click="updateSort(item.row.id,'down')"></el-button>
          </el-tooltip>
          <el-tooltip effect="dark" content="上移" placement="top">
            <el-button v-if="checkPermission('sys_menu:update')" type="text" style="margin-left:0;"
                       icon="el-icon-sort-up" size="small" @click="updateSort(item.row.id,'up')"></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column key="option" align="center" label="操作" width="260">
        <template slot="header" v-if="checkPermission('sys_menu:create')">
          <el-button
            type="primary"
            size="mini"
            @click="openCreateDlg()">新增
          </el-button>
        </template>
        <template slot-scope="item">
          <el-button v-if="checkPermission('sys_menu:create')" size="mini" @click="openCreateDlg(item.row)">添加子菜单
          </el-button>
          <el-button v-if="checkPermission('sys_menu:update')" size="mini" @click="openEditDlg(item.row)">编辑
          </el-button>
          <el-button v-if="checkPermission('sys_menu:delete')" type="danger" size="mini" @click="del(item.row.id)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog v-loading="menu.editMode&&loadingMenuInfo" :title="menu.editMode?'更新菜单项':'新建菜单项'"
               :visible.sync="menuDlgVisible" :close-on-click-modal="false" width="50%">
      <el-form label-width="auto" style="width:100%;margin-top:20px;">
<!--        <el-col :span="12">-->
          <el-form-item label="名称:">
            <el-input v-model="menu.name" autocomplete="off"
                      placeholder="请输入内容"></el-input>
          </el-form-item>
<!--        </el-col>-->
<!--        <el-col :span="12">-->
          <el-form-item label="链接:" v-if="!menu.editMode">
            <el-input v-model="menu.path" autocomplete="off"></el-input>
          </el-form-item>

        <el-form-item label="父级菜单:">
          <el-cascader v-loading="isLoading"
                       v-model="menu.parentId"
                       :props="{value:'id',emitPath:false,checkStrictly: true,label:'name'}"
                       clearable
                       filterable
                       :options="menuList"></el-cascader>
        </el-form-item>
<!--        </el-col>-->
<!--        <el-col :span="12">-->
          <el-form-item label="所需权限:">
            <el-select filterable default-first-option placeholder="请选择所需权限" v-model="menu.permission" clearable :filter-method="officeFilter">
              <el-option
                      v-for="item in permissionData.filterList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
              >
                <span style="float: left;padding-right: 20px;">{{ item.name }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.id }}</span>
              </el-option>
            </el-select>
          </el-form-item>
<!--        </el-col>-->
<!--        <el-col :span="12">-->
          <el-form-item label="图标:">
<!--            <el-input v-model="menu.icon" autocomplete="off"></el-input>-->
            <span style="padding: 10px;font-size:18px!important;text-align: center;height: auto;line-height: normal;">
              <i v-if="menu.icon" :class="menu.icon"></i>
              <i v-else>无</i>
            </span>
            <el-popover
                    placement="right"
                    width="600"
                    v-model="showSelectIconProp"
                    trigger="manual">
              <div style="height:300px;overflow: auto;">
              <el-col span="3" v-for="icon in iconList"
                      style="font-size:18px!important;text-align:center;padding: 10px;height: auto;line-height: normal;"
                      :class="menu.icon==icon?'el-menu-item is-active':'el-menu-item'"
                      @click.native="menu.icon=icon,showMenuIcon=false">
                <i :class="icon"></i>
              </el-col>
              </div>
              <span  slot="reference">
              <el-input style="width:300px;" v-model="menu.icon" autocomplete="off" clearable></el-input>
                &nbsp;&nbsp;<el-button type="primary" size="small" @click="showMenuIcon=true">选择
              </el-button>
              </span>

            </el-popover>
          </el-form-item>
<!--        </el-col>-->

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="success" @click="saveMenu">保存</el-button>
        <el-button @click="menuDlgVisible = false">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
    export default {
      $$route:{
        meta:{
          title:'系统菜单'
        }
      },
        name: "MenuList",
        data() {
            return {
                isLoading: false,
                roleList: [],
                levelList: [],
                menuDlgVisible: false,
                menu: {},
                menuList: [],
                loadingMenuInfo: false,
              permissionData:{
                dataList:[],
                dataMap:{},
                filterList:[],
              },
              showMenuIcon: false,
            }
        },
        computed: {
          showSelectIconProp: function () {
            if (this.menuDlgVisible == false) {
              this.showMenuIcon = false;
            }
            return this.showMenuIcon;
          },
        },
        created: function () {
            this.loadMenuList();
            this.loadPermissionList();
        },

        methods: {
            loadMenuList: function (pageNo) {
                this.isLoading = true;

                if (!pageNo) {
                    pageNo = 1;
                }

                this.$get("/menu/data", {}, (data) => {
                    this.menuList = data.data;
                }, () => {
                    this.isLoading = false;
                });
            },
          loadPermissionList: function () {
            this.$get("/permission/data", {},(data) => {
              this.permissionData.dataList = data.data;
              for(var item of this.permissionData.dataList) {
                this.permissionData.dataMap[item.id] = item;
              }
              this.permissionData.filterList = this.permissionData.dataList;
            });
          },

            del: function (id) {
              this.$confirm('该操作同时移除子菜单，不可恢复，是否继续', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                this.isLoading = true;
                this.$post("/menu/delete", {id:id}, (data) => {
                  this.$message.success('删除成功！');
                  this.loadMenuList();
                },(response)=>{
                  this.isLoading = false;
                });
              }).catch(() => {
              });

            },
            openCreateDlg(item) {
                this.menuDlgVisible = true;
              // this.showMenuIcon = false;
                this.permissionData.filterList = this.permissionData.dataList;
                if (item) {
                    this.menu = {parentId: item.id};
                } else {
                  this.menu = {};
                }

            },
            openEditDlg(item) {
              // this.showMenuIcon = false;
              this.permissionData.filterList = this.permissionData.dataList;
                this.menuDlgVisible = true;
                this.loadingMenuInfo = true;
                const message = this.$message;
                // this.$get("/menu/info/" + item.id, {}, (data) => {
                //     var menuData = data.data;
                //     var roleIdList = [];
                //     if (menuData.roleList) {
                //         for (var item of menuData.roleList) {
                //             roleIdList.push(item.id);
                //         }
                //     }
                //     menuData.roleIdList = roleIdList;
                //     this.menu = menuData;
                //     this.menu.editMode = true;
                // }, () => {
                //     this.loadingMenuInfo = false;
                // });

                this.menu = JSON.parse(JSON.stringify(item));

            },
            saveMenu: function (id) {
                const message = this.$message;
                if (this.menu.id) {
                    this.$post("/menu/update", this.menu, (data) => {
                        this.menuDlgVisible = false;
                        message.success('更新成功！');

                        this.loadMenuList();
                    });
                } else {
                    this.$post("/menu/create", this.menu, (data) => {
                        this.menuDlgVisible = false;
                        message.success('创建成功！');
                        this.loadMenuList();

                    });
                }
            },
            updateSort: function (id, type) {
                const message = this.$message;
                this.$post("/menu/update_sort", {id:id,type:type}, (data) => {
                    this.menuDlgVisible = false;
                    message.success('更新成功！');

                    this.loadMenuList();
                });
            },

            handleClickRow(row, column, event) {

            },
          officeFilter(val) {
              if(!val) {
                this.permissionData.filterList = this.permissionData.dataList;
                return;
              }
            var resultList = [];
            for(var item of this.permissionData.dataList) {
              if(item.name.indexOf(val) >=0||item.id.indexOf(val)>=0){
                resultList.push(item);
              }
            }
            this.permissionData.filterList = resultList;
          },
        },

    }
</script>
